<template>
  <div class="clue-container">
    <div class="detail-wrap">
      <!-- 1商机基本信息 -->
      <div class="card">
        <div class="card-hd">
          <span>{{businessBaseInfo.customName}}</span>
        </div>
        <div class="card-bd">
          <div class="card-bd-item">
            <span>商机类型：</span>
            <span>{{businessBaseInfo.typeName}}</span>
          </div>
          <div class="card-bd-item">
            <span>产品：</span>
            <span class="c333">{{businessBaseInfo.productTypeName}}</span>
            <span v-if="businessBaseInfo.productName" class="c333">{{'>'+businessBaseInfo.productName}}</span>
          </div>
          <div class="card-bd-item">
            <span>来源：</span>
            <span class="c333">{{businessBaseInfo.sourceName}}</span>
            <span v-if="businessBaseInfo.sourceSubName" class="c333">{{'>'+businessBaseInfo.sourceSubName}}</span>
          </div>
          <div class="card-bd-item">
            <span>需求：</span>
            <span>{{businessBaseInfo.requirement}}</span>
          </div>
          <div class="card-bd-item">
            <span>标签：</span>
            <span class="y-label" v-for="label in businessBaseInfo.labels" :key="label.pid">{{label.name}}</span>
          </div>
        </div>
      </div>
      <!-- 2阶段 -->
      <div class="card">
        <div class="card-hd">
          <span>阶段</span>
        </div>
        <div class="card-bd">
          <div class="card-bd-item">
            <span>销售阶段：</span>
            <span class="y-label" v-if="periodInfo.effect === 1">{{periodInfo.salePeriodId | parseSalePeriod}}</span>
            <span class="y-label" v-if="periodInfo.effect === 0">商机确认</span>
          </div>
          <div class="card-bd-item">
            <span>财务阶段：</span>
            <span class="y-label">{{periodInfo.hasForecast | parseForecast}}</span>
            <span class="y-label">{{periodInfo.hasBill | parseBill}}</span>
            <span class="y-label">{{periodInfo.paymentStatus | parsePayPeriod}}</span>
          </div>
        </div>
      </div>
      <!-- 3时间提醒 -->
      <div class="card">
        <div class="card-hd">
          <span>时间提醒</span>
        </div>
        <div class="card-bd">
          <div class="card-bd-item">
            <span>最后跟进：</span><span>{{businessBaseInfo.lastLogTime}}</span>
          </div>
          <div class="card-bd-item">
            <span>下次跟进：</span><span>{{businessBaseInfo.nextLogTime}}</span>
          </div>
          <div class="card-bd-item">
            <span>未跟进回收：</span><span>{{businessBaseInfo.notDealTime}}</span>
          </div>
          <div class="card-bd-item">
            <span>未赢单回收：</span><span>{{businessBaseInfo.outChangeTime}}</span>
          </div>
        </div>
      </div>
      <!-- 4跟进 -->
      <div class="card">
        <div class="card-hd">
          <span>跟进</span><span class="c999"> | <span class="fz12">{{logCount}}</span></span>
        </div>
        <div class="card-bd">
          <div class="card-bd-item lh150 fz14">
            <div>{{logInfo.createName}}</div>
            <div class="fz12 c999">{{logInfo.createTime}}</div>
            <div v-html="logInfo.intro"></div>
          </div>
        </div>
      </div>
      <!-- 5销售团队 -->
      <div class="card">
        <div class="card-hd">
          <span>销售团队</span>
        </div>
        <div class="card-bd">
          <div class="card-bd-item" v-for = 'saler in salersList' :key="saler.pid">
            <span class="c333">{{saler.userName}}</span>
            <span class="y-label ml10" v-if="saler.type === 1">负责人</span>
            <span class="c999 fr">{{saler.contributionDegree | parseRate}}</span>
          </div>
        </div>
      </div>
      <!-- 6运营团队 -->
      <div class="card">
        <div class="card-hd">
          <span>运营团队</span>
        </div>
        <div class="card-bd">
          <div class="card-bd-item" v-for="operator in operatorsList" :key="operator.pid">
            <span class="c333">{{operator.userName}}</span>
            <span class="y-label ml10" v-if="operator.main === 1">负责人</span>
          </div>
          <div class="card-bd-item" v-if="operatorsList.length === 0">
            <span class="c999">暂无运营人员</span>
          </div>
        </div>
      </div>
      <!-- 7联系人 -->
      <div class="card">
        <div class="card-hd">
          <span>联系人</span>
        </div>
        <div class="card-bd">
          <div class="card-bd-item" v-for="contact in contactsList" :key="contact.pid">
            <span class="c333">{{contact.name}}</span>
            <span class="y-label ml10">{{contact.type | parseRole}}</span>
            <span class="c999 fr">{{contact.position}}</span>
          </div>
        </div>
      </div>
      <!-- 8需求方案 -->
      <div class="card">
        <div class="card-hd">
          <span>需求方案</span>
        </div>
        <div class="card-bd" v-if="!demandInfo.createTime">
          <div class="card-bd-item">
            <span class="c999">暂无需求方案</span>
          </div>
        </div>
        <div class="card-bd" v-if="demandInfo.createTime">
          <div class="card-bd-item">
            <span>项目描述：</span><span>{{demandInfo.projectDes}}</span>
          </div>
          <div class="card-bd-item">
            <span>软件需求：</span><span>{{demandInfo.softRequirement}}</span>
          </div>
          <div class="card-bd-item">
            <span>技术需求：</span><span>{{demandInfo.skillRequirement}}</span>
          </div>
          <div class="card-bd-item">
            <span>内容需求：</span><span>{{demandInfo.contentRequirement}}</span>
          </div>
          <div class="card-bd-item">
            <span>应对方案：</span><span>{{demandInfo.responseOptions}}</span>
          </div>
        </div>
      </div>
      <!-- 9寻求支持 -->
      <div class="card">
        <div class="card-hd">
          <span>寻求支持</span>
        </div>
        <div class="card-bd" v-if="supportInfo.flag === 0">
          <div class="card-bd-item">
            <span class="c999">暂无寻求支持</span>
          </div>
        </div>
        <div class="card-bd" v-if="supportInfo.flag === 1">
          <div class="card-bd-item">
            <span>流水号：</span>
            <span>{{supportInfo.serialNo}}</span>
          </div>
          <div class="card-bd-item">
            <span>申请时间：</span>
            <span>{{supportInfo.applyTime}}</span>
          </div>
          <div class="card-bd-item">
            <span>申请人：</span>
            <span>{{supportInfo.applyUserName}}</span>
          </div>
          <div class="card-bd-item">
            <span>主题：</span>
            <span>{{supportInfo.subject}}</span>
          </div>
          <div class="card-bd-item">
            <span>状态：</span>
            <span class="cblue">{{supportInfo.status | parseSupportStatus}}</span>
          </div>
        </div>
      </div>
      <!-- 10成交预测 -->
      <div class="card">
        <div class="card-hd">
          <span>成交预测</span>
        </div>
        <div class="card-bd" v-if="dealForecastInfo.flag === 0">
          <div class="card-bd-item">
            <span class="c999">暂无成交预测</span>
          </div>
        </div>
        <div class="card-bd" v-if="dealForecastInfo.flag === 1">
          <div class="card-bd-item">
            <span>预测时间：</span><span>{{dealForecastInfo.createTime}}</span>
          </div>
          <div class="card-bd-item">
            <span>成交时间：</span><span>{{dealForecastInfo.time}}</span>
          </div>
          <div class="card-bd-item">
            <span>成交金额：</span><span>{{dealForecastInfo.amt+ '.00' | numFormat}}元</span>
          </div>
          <div class="card-bd-item">
            <span>把握程度：</span><span>{{dealForecastInfo.graspDegree | parseGraspDegree}}</span>
          </div>
        </div>
      </div>
      <!-- 11回款预测 -->
      <div class="card">
        <div class="card-hd">
          <span>回款预测</span>
        </div>
        <div class="card-bd" v-if="paymentForecastInfo.flag === 0">
          <div class="card-bd-item">
            <span class="c999">暂无回款预测</span>
          </div>
        </div>
        <div class="card-bd" v-if="paymentForecastInfo.flag === 1">
          <div class="card-bd-item">
            <span>预测时间：</span><span>{{paymentForecastInfo.createTime}}</span>
          </div>
          <div class="card-bd-item">
            <span>回款时间：</span><span>{{paymentForecastInfo.firstTime}}</span>
          </div>
          <div class="card-bd-item">
            <span>回款金额：</span><span>{{paymentForecastInfo.firstAmt+ '.00' | numFormat}}元</span>
          </div>
          <div class="card-bd-item">
            <span>把握程度：</span><span>{{paymentForecastInfo.firstGraspDegree | parseGraspDegree}}</span>
          </div>
        </div>
      </div>
      <!-- 12开票预测 -->
      <div class="card">
        <div class="card-hd">
          <span>开票预测</span>
        </div>
        <div class="card-bd" v-if="billForecastInfo.flag === 0">
          <div class="card-bd-item">
            <span class="c999">暂无开票预测</span>
          </div>
        </div>
        <div class="card-bd" v-if="billForecastInfo.flag === 1">
          <div class="card-bd-item">
            <span>预测时间：</span>
            <span>{{billForecastInfo.createTime}}</span>
          </div>
          <div class="card-bd-item">
            <span>开票时间：</span>
            <span>{{billForecastInfo.time}}</span>
          </div>
          <div class="card-bd-item">
            <span>开票金额：</span>
            <span>{{billForecastInfo.amt}}</span>元
          </div>
          <div class="card-bd-item">
            <span>把握程度：</span>
            <span>{{billForecastInfo.graspDegree | parseGraspDegree}}</span>
          </div>
        </div>
      </div>
      <!-- 13合同 -->
      <div class="card">
        <div class="card-hd">
          <span>合同</span>
        </div>
        <div class="card-bd" v-if="contractInfo.flag === 0">
          <div class="card-bd-item">
            <span class="c999">暂无合同</span>
          </div>
        </div>
        <div class="card-bd" v-if="contractInfo.flag === 1">
          <div class="card-bd-item">
            <span>合同编号：</span>
            <span class="fr">{{contractInfo.no}}</span>
          </div>
          <div class="card-bd-item">
            <span>合同金额：</span>
            <span class="fr">{{contractInfo.amt}}元</span>
          </div>
          <div class="card-bd-item">
            <span>签订时间：</span>
            <span class="fr">{{contractInfo.signTime}}</span>
          </div>
        </div>
      </div>
      <!-- 14回款 -->
      <div class="card">
        <div class="card-hd">
          <span>回款</span>
        </div>
        <div class="card-bd" v-if="paymentsInfo.length === 0">
          <div class="card-bd-item">
            <span class="c999">暂无回款</span>
          </div>
        </div>
        <div class="card-bd" v-else>
          <div class="card-bd-item" v-for="payment in paymentsInfo" :key="payment.pid">
            <span>{{payment.paymentTime}}</span>
            <span class="fr">{{payment.amt+ '.00' | numFormat}}元</span>
          </div>
        </div>
      </div>
      <!-- 15开票 -->
      <div class="card">
        <div class="card-hd">
          <span>开票</span>
        </div>
        <div class="card-bd" v-if="billsInfo.length === 0">
          <div class="card-bd-item">
            <span class="c999">暂无开票</span>
          </div>
        </div>
        <div class="card-bd" v-else>
          <div class="card-bd-item" v-for="bill in billsInfo" :key="bill.pid">
            <span>{{bill.createTime}}</span>
            <span class="ml20">{{bill.amt+ '.00' | numFormat}}元</span>
            <span class="fr">{{bill.status | parseBillStatus}}</span>
          </div>
        </div>
      </div>
      <!-- 16结项 -->
      <div class="card" style="margin-bottom:50px;">
        <div class="card-hd">
          <span>结项</span>
        </div>
        <div class="card-bd" v-if="endInfo.flag === 0">
          <div class="card-bd-item">
            <span class="c999">暂无结项</span>
          </div>
        </div>
        <div class="card-bd" v-if="endInfo.flag === 1">
          <div class="card-bd-item">
            <span>流水号：</span>
            <span>{{endInfo.serialNo}}</span>
          </div>
          <div class="card-bd-item">
            <span>申请时间：</span>
            <span>{{endInfo.applyTime}}</span>
          </div>
          <div class="card-bd-item">
            <span>申请人：</span>
            <span>{{endInfo.applyUserName}}</span>
          </div>
          <div class="card-bd-item">
            <span>主题：</span>
            <span>{{endInfo.subject}}</span>
          </div>
          <div class="card-bd-item">
            <span>状态：</span>
            <span class="cblue">{{endInfo.status | parseEndStatus}}</span>
          </div>
        </div>
      </div>
    </div>
    <!--操作-->
    <!--<div class="footer-action" v-show="['1', '2', '3', '4', '5'].indexOf(businessBaseInfo.salePeriodId) >= 0">-->
      <!--&lt;!&ndash;整行的跟进&ndash;&gt;-->
      <!--<div class="action-item highlight full-item" v-show="businessBaseInfo.salePeriodId === 1"-->
           <!--ui-sref="business.log.add({businessId: business.pid})">跟进</div>-->
      <!--&lt;!&ndash;跟进和更多&ndash;&gt;-->
      <!--<div class="action-item highlight" v-show="['2', '3', '4', '5'].indexOf(businessBaseInfo.salePeriodId) >= 0"-->
           <!--ui-sref="business.log.add({businessId: business.pid})">跟进</div>-->
      <!--<div class="action-item" @click="showOperate = !showOperate" v-show="['2', '3', '4', '5'].indexOf(businessBaseInfo.salePeriodId) >= 0">更多</div>-->
      <!--<div class="operate-wrap" v-show="showOperate">-->
        <!--<div>催办</div>-->
        <!--<div>分配</div>-->
      <!--</div>-->
    <!--</div>-->
  </div>
</template>

<script>
import {GetBusinessBaseInfo, GetBusinessPeriod, GetLatestLog, GetSalers, GetOperators, GetContacts, GetDemand, GetSupport,
  GetDealForecast, GetPaymentForecast, GetBillForecast, GetContracts, GetPayments, GetBills, GetEnds} from '@/services/business.service'
import {dateToString, parseAvatar} from '@/core/utils'
export default {
  name: 'BusinessDetail',
  props: {
    'id': String
  },
  data () {
    return {
      businessBaseInfo: {},
      periodInfo: {},
      logInfo: {},
      logCount: '',
      salersList: [],
      salersInfo: {},
      operatorsList: [],
      operatorsInfo: {},
      contactsList: [],
      demandInfo: {},
      supportInfo: {},
      dealForecastInfo: {},
      paymentForecastInfo: {},
      billForecastInfo: {},
      contractInfo: {},
      paymentsInfo: [],
      billsInfo: [],
      endInfo: {},
      showOperate: false
    }
  },
  computed: {},
  watch: {},
  created () {
    this.initBusinessDetail()
  },
  methods: {
    initBusinessDetail () {
      this.getBusinessBaseInfo()
      this.getBusinessPeriod()
      this.getLatestLog()
      this.getSalers()
      this.getContacts()
      this.getDemand()
      this.getSupport()
      this.getDealForecast()
      this.getPaymentForecast()
      this.getBillForecast()
      this.getContracts()
      this.getPayments()
      this.getBills()
      this.getEnds()
    },
    // 1、商机基本信息（内含客户基本信息，时间提醒）
    getBusinessBaseInfo () {
      GetBusinessBaseInfo(this.id).then((res) => {
        this.businessBaseInfo = res
        this.businessBaseInfo.lastLogTime = dateToString(res.lastLogTime, 'yyyy-MM-dd HH:mm:ss')
        this.businessBaseInfo.nextLogTime = dateToString(res.nextLogTime, 'yyyy-MM-dd HH:mm:ss')
        this.businessBaseInfo.notDealTime = dateToString(res.notDealTime, 'yyyy-MM-dd HH:mm:ss')
        this.businessBaseInfo.outChangeTime = dateToString(res.outChangeTime, 'yyyy-MM-dd HH:mm:ss')
        // 5、商机运营团队
        GetOperators(this.businessBaseInfo.customId).then((res) => {
          this.operatorsList = res
        })
      })
    },
    // 2、销售阶段、财务阶段
    getBusinessPeriod () {
      GetBusinessPeriod(this.id).then((res) => {
        this.periodInfo = res
      })
    },
    // 3、最新跟进日志
    getLatestLog () {
      let param = {type: 1, uuid: this.id}
      GetLatestLog(param).then((res) => {
        this.logCount = res.paging.count
        if (res.datas.length !== 0) {
          this.logInfo = res.datas[0]
        }
      })
    },
    // 4、销售团队
    getSalers () {
      GetSalers(this.id).then((res) => {
        this.salersList = res
      })
    },
    // 6、联系人列表
    getContacts () {
      let param = {type: 1, uuid: this.id}
      GetContacts(param).then((res) => {
        this.contactsList = res
      })
    },
    // 7、需求方案
    getDemand () {
      GetDemand(this.id).then((res) => {
        this.demandInfo = res
      })
    },
    // 8、寻求支持
    getSupport () {
      GetSupport(this.id).then((res) => {
        if (res.length !== 0) {
          this.supportInfo = res[0]
          this.supportInfo.applyTime = dateToString(res[0].applyTime, 'yyyy-MM-dd HH:mm:dd')
          this.supportInfo.flag = 1
        } else {
          this.supportInfo = {flag: 0}
        }
      })
    },
    // 9、成交预测
    getDealForecast () {
      GetDealForecast(this.id).then((res) => {
        if (res.length !== 0) {
          this.dealForecastInfo = res[0]
          this.dealForecastInfo.createTime = dateToString(res[0].createTime, 'yyyy-MM-dd')
          this.dealForecastInfo.time = dateToString(res[0].time, 'yyyy-MM-dd')
          this.dealForecastInfo.flag = 1
        } else {
          this.dealForecastInfo = {flag: 0}
        }
      })
    },
    // 10、回款预测
    getPaymentForecast () {
      GetPaymentForecast(this.id).then((res) => {
        if (res.length !== 0) {
          this.paymentForecastInfo = res[0]
          this.paymentForecastInfo.createTime = dateToString(res[0].createTime, 'yyyy-MM-dd')
          this.paymentForecastInfo.firstTime = dateToString(res[0].firstTime, 'yyyy-MM-dd')
          this.paymentForecastInfo.flag = 1
        } else {
          this.paymentForecastInfo = {flag: 0}
        }
      })
    },
    // 11、开票预测
    getBillForecast () {
      GetBillForecast(this.id).then((res) => {
        if (res.length !== 0) {
          this.billForecastInfo = res[0]
          this.billForecastInfo.createTime = dateToString(res[0].createTime, 'yyyy-MM-dd')
          this.billForecastInfo.time = dateToString(res[0].time, 'yyyy-MM-dd')
          this.billForecastInfo.flag = 1
        } else {
          this.billForecastInfo = {flag: 0}
        }
      })
    },
    // 12、合同
    getContracts () {
      let param = {businessId: this.id}
      GetContracts(param).then((res) => {
        if (res.length !== 0 && res[0]) {
          this.contractInfo = res[0].contract
          this.contractInfo.signTime = dateToString(res[0].contract.signTime, 'yyyy-MM-dd')
          this.contractInfo.flag = 1
        } else {
          this.contractInfo = {flag: 0}
        }
      })
    },
    // 13、回款
    getPayments () {
      let param = {businessId: this.id}
      GetPayments(param).then((res) => {
        this.paymentsInfo = res
        if (this.paymentsInfo.length !== 0) {
          this.paymentsInfo.forEach((item) => {
            item.paymentTime = dateToString(item.paymentTime, 'yyyy-MM-dd')
          })
        }
      })
    },
    // 14、开票
    getBills () {
      let param = {businessId: this.id}
      GetBills(param).then((res) => {
        this.billsInfo = res
        if (this.billsInfo.length !== 0) {
          this.billsInfo.forEach((item) => {
            item.createTime = dateToString(item.createTime, 'yyyy-MM-dd')
          })
        }
      })
    },
    // 15、结项
    getEnds () {
      GetEnds(this.id).then((res) => {
        if (res.length !== 0) {
          this.endInfo = res[0]
          this.endInfo.applyTime = dateToString(res[0].applyTime, 'yyyy-MM-dd HH:mm:ss')
          this.endInfo.flag = 1
        } else {
          this.endInfo = {flag: 0}
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
  .detail-wrap
    padding 15px
  .card
    background: #fff
    border-radius: 3px
    padding: 10px 0
    margin-bottom: 10px
  .card-hd
    font-size: 16px
    text-indent: 10px
    line-height: 20px
    color: #1AB394
    border-left: 5px solid #1AB394
    margin-bottom: 10px
    i
      float: right
  .card-bd
    border-top: 1px solid #f2f2f2
    padding: 0 15px
    .card-bd-item
      line-height: 25px
      font-size: 12px
      span:first-child
        color:#999
  // 标签
  .y-label
    font-size: 12px
    background-color: #1AB394
    color: #fff
    padding: 3px 5px
    border-radius: 3px
    & + .y-label
      margin-left: 8px
  /*footer*/
  .footer-action
    position: fixed
    bottom: 0
    width: 100%
    height: 45px
    line-height: 45px
    background: #fff
    z-index: 4
    font-size: 16px
    .action-item
      float: left
      width: 50%
      color: #666
      text-align: center
    .highlight
      background: #1AB394
      color: #fff
    .full-item
      width: 100%
      background: #1AB394
      color: #fff
      text-align: center
  .footer-action .four-action-item
    float: left
    width: 25%
    color: #666
    text-align: center
  .footer-action .four-action-item.highlight
    background: #1AB394
    color: #fff
  /*分配和催办*/
  .operate-wrap
    position: fixed
    bottom: 45px
    right: 0
    width: 50%
    border-top: 1px solid #ddd
    border-left: 1px solid #ddd
  .operate-wrap div
    height: 45px
    line-height: 45px
    background-color: #fff
    border-bottom: 1px solid #ddd
    text-align: center
</style>
